vue+element实现动态表格：根据后台返回的属性名和字段动态生成可变表格 |
您所在的位置：网站首页 › element ui table动态列 › vue+element实现动态表格：根据后台返回的属性名和字段动态生成可变表格 |
vue+element实现动态表格：根据后台返回的属性名和字段动态生成可变表格
|
vue+element实现动态表格：根据后台返回的属性名和字段动态生成表头可变表格
由于项目需求，需要有一个动态表格，可以根据配置或从后台获取表格属性列。 场景描述：现有一个胡萝卜厂生产不同品种的胡萝卜，为了便于客户了解产品，现需在官网展示胡萝卜信息。现有的萝卜信息：编号（id）、名称（name）、保质期（age）、特点（remark），但是日后会有扩展信息，可能会加上颜色、体积等信息。 问题分析：现在可以确定胡萝卜有4个属性要展示，以后还要扩展信息，而且这个厂以后可能生产别的蔬菜水果，也需要展示相应信息，需求变动的话要修改很多代码。这时候如果有一个动态表格，表格的表头信息从后台获取（或在js中配置），那日后修改胡萝卜表的属性（增加或删除表字段）时就不用修改前端页面代码，长远一点来看，日后这个厂生产别的蔬菜水果也需要信息展示时，这个表格就可以复用（把表格抽出来当一个模板，需要用的页面引用即可，这个代码我有时间会从项目中整理出来）。 代码上场啦！！！ 动态表格动态表格核心代码如下： 可选择属性: {{scope.row[scope.column.property]}}注意tableColumnList就是实现动态的关键因素！ tableColumnList里面存放的就是我们通过js文件或者接口获取到的表头属性，内容如下： [{prop: ‘id’, propName: ‘编号’}, {prop: ‘name’, propName: ‘名称’}, {prop: ‘age’, propName: ‘保质期’}, {prop: ‘remark’, propName: ‘特点’}], prop跟胡萝卜表中的字段是一一对应的，propName就是每个字段的中文名，也即在表头显示的名字。 tableColumnList的获取方法有两种： （1）在前端js中配置我是放在static文件夹下面的config.js中，目录如下： 注意，采用此种方法获取。后端接口一定要同时返回属性的中文名和英文名，即prop和propName。 还有一个关键步骤，就是一定要在在页面渲染之前获取到tableColumnList，然后再去渲染表格，这就涉及到vue的生命周期了，这块不做多余解释，我是直接在created中调用获取tableColumnList的方法，整个js如下： export default { data() { return { listLoading: false, showList: [], // 这里为了简便我就没有调用后台接口获取数据，直接写的假数据 你要用的话可以调用后台接口获取tableColumnList，注意数据格式 tableColumnList: [{prop: 'id', propName: '编号'}, {prop: 'name', propName: '名字'}, {prop: 'age', propName: '保质期'}, {prop: 'remark', propName: '特点'}], // 这里为了简便我就没有调用后台接口获取数据，直接写的假数据 dataList: [{'id': '100001','name': '小红萝卜','age': '2年','remark': '适合油炸','country': '中国','address': '广东省深圳市'}, {'id': '100002','name': '萝卜妹','age': '2年','remark': '适合水煮','country': '美国','address': '硅谷'}, {'id': '100003','name': '胖萝卜头','age': '1年','remark': '适合玩儿','country': '泰国','address': '清迈'}, {'id': '100004','name': '萝卜酱','age': '4年','remark': '适合吃火锅','country': '韩国','address': '首尔'}], optionalColumnList: [{prop: 'country', propName: '出口国家'}, {prop: 'address', propName: '零售点'}], checkArr:[] } }, created() { this.queryFn() }, methods: { queryFn() { // 调用后台接口获取tableColumnList和dataList的方法写在这里 // getData().then(response =>{ // this.tableColumnList = response.data.tableColumnList // this.dataList = response.data.dataList // }) this.showList = this.dataList }, clearQuery() { this.query.name = '' this.queryFn() }, menuChange(item){ // 注意 我这里都用的假数据，要从后台获取tableColumnList和dataList的时候 //，每一次调用menuChange都要重新获取tableColumnList和dataList，保证属性和数据是对应的 let flag = true for(var i=0;i flag = false break } } if(!flag){ this.tableColumnList.push(item) } if(flag){ Array.prototype.contains = function(obj) { var j = this.length; while (j--) { if (this[j] === obj) { return j; // 返回的这个 i 就是元素的索引下标， } } return false } this.tableColumnList.splice(this.tableColumnList.contains(item),1) } }, } }解释一下menuChange方法： 当用户勾选一个可选择属性之后，就触发这个方法，这个方法主要做一件事情： 改变tableColumnList的值，从而动态改变表格的列 页面效果如下： 动态表格与element一般表格在使用方法上的两个区别： 1、label与property的赋值方式 动态表格，表格的label和property是动态根据后台返回的数据(或者从js获取)来取值的，后台返回的数据就是上面的tableColumnList。 通过 :label=“item.propName” 取得tableColumnList中的propName，也就是表头每一列的名字；通过 :property=“item.prop” 取得tableColumnList中对象的prop，也就是后台实体类中的属性名，2、属性和数据双向绑定方式,也就是 scope.row.* 通过 ** scope.row[scope.column.property]** 来获取每一个属性对应的数据， scope.column.property 中的property取的就是 :property=“item.prop” 中的值；好了，至此已经实现了基于vue+element的动态表格，核心代码我基本都贴出来了。之前的那篇我写的可能不是很清楚，导致大家看不懂直接找我要源码，这次修改之后我觉得是很清楚的了！认真看下来一定可以自己写出来的！你要实在写不出来，在私信我源码吧，我看到一定回复你。 实现表格间的互相拖拽功能，其实也用到了这种动态生成表格的方法，我在项目中就这样做的，但我最近太忙了，有时间一定整理出来。 对你有用记得点赞我哦！ 不需要花积分，免费的，下载完解压后直接访问index.html即可。 拿走要点赞哟~ |
内容：直接声明一个数组变量并赋值就好，用的时候引入js直接使用名字就可以使用 
放在这里的好处：前端项目打包成dist时，会把这个static文件夹放在dist里面，以后修改的时候就直接修改js配置文件，不用动.vue源代码。
可选择属性有两个(也可以看作以后可能扩展的属性，这里只演示一下动态效果)，勾选之后: 
代码我最近花时间整理了一下，下载链接：https://download.csdn.net/download/weixin_43714266/12321382【本文地址】
今日新闻 |
推荐新闻 |